<template>
  <div>
    <commonHeader title="个人中心" height="300">
      <div class="userDetail">
        <i-avatar
          i-class="userAvatar"
          shape="cirlce"
          size="large"
          :src="avatar"
        ></i-avatar>
        <div class="userCenterContent">
          <span class="name">{{name}}</span>
          <span class="gender">{{gender}}</span>
          <span class="age">25岁</span>
        </div>
      </div>
    </commonHeader>
    <div class="content">
      <div class="content_item" v-for="item in menu" :key="item.id" @click="handleLink(item.link)">
        <image class="content_img" :src="item.icon" />
        <p class="toRight">{{item.name}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "../../../common/Header.vue";
export default {
  components: {
    commonHeader: Header
  },
  data() {
    return {
      name: "科比",
      gender: "男",
      age: "40",
      avatar:
        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3165862407,3625382219&fm=26&gp=0.jpg",
      link: "../my_info/main",

      menu: [
        {
          id: 0,
          name: "我的医生",
          link: "/pages/myDoctors/main",
          icon: "../../../static/images/user.png"
        },
        {
          id: 1,
          name: "健康档案",
          link: "/pages/healthFile/main",
          icon: "../../../static/images/user.png"
        },
        {
          id: 3,
          name: "意见反馈",
          link: "/pages/patient/feedback/main",
          icon: "../../../static/images/user.png"
        },
        {
          id: 4,
          name: "设置",
          link: "/pages/userSetting/main",
          icon: "../../../static/images/user.png"
        }
      ]
    };
  },
  methods: {
    handleLink(url) {
      console.log(url);
      this.$router.push(url);
    }
  },
  mounted() {
    console.log(1);
    const detail = wx.getStorageSync('userInfo')
    console.log(detail)
    this.name = detail.nickName
    this.age = 25
    this.gender = detail.gender === 1 ? '男' : '女'
    this.avatar = detail.avatarUrl
  }
};
</script>
<style>
.userAvatar {
  width: 140rpx !important;
  height: 140rpx !important;
  border-radius: 50% !important;
  margin-top: 10rxp !important;
}
</style>
<style  lang='scss' scoped>
.userDetail {
  box-sizing: border-box;
  height: 190rpx;
  line-height: 190rpx;
  margin-top: 110rpx;
  position: relative;
  // bottom: 0;
  .userCenterContent {
    display: inline-block;
    position: absolute;
    margin-left: 40rpx;
    color: #ffffff;
    .name {
      font-size: 36rpx;
    }
    .gender,
    .age {
      margin-left: 10rpx;
      font-size: 28rpx;
    }
  }
}
.content {
  margin-top: 300rpx;
}
.content_item {
  position: relative;
  height: 100rpx;
  line-height: 100rpx;
  display: flex;
  align-items: center;
}
.content_img {
  width: 80rpx;
  height: 80rpx;
  margin-left: 10rpx;
}
.content_item p {
  flex: 1;
  margin-left: 20rpx;
  margin-right: 20rpx;
  font-size: 32rpx;
  border-bottom: 1rpx solid #dddddd;
}
</style>